<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>审批流程</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        /* font-size: 1.4rem; */
    }

    /* #20b759 */
    .header {
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
        padding: 1rem 0;
        color: #666;
        /* margin: 2rem 0; */
    }

    .desc {
        font-size: 1.4rem;
        color: #6d6d6d;
    }

    .el-image-viewer__mask {
        background: #fff !important;
        opacity: 0.8 !important;
    }

    .el-dialog {
        height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .el-dialog__body {
        flex: 1;
        padding: 10px 20px !important;
    }

    /* 重写提示框 */
    .el-message-box {
        width: 70% !important;
    }

    .signArea {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .signArea .desc {
        color: tomato;
    }

    #signature {
        /* width: 600px;
        height: 600px; */
        flex: 1;
        width: 100%;
        border: 0.2rem solid #20b759;
        background-color: #e7e7e7;
    }

    /* //重写撤退按钮样式 */
    .backBtn {
        bottom: 0px;
        margin-left: 1rem;
        background-color: #409eff;
        outline: none;
        border: none;
        color: #fff;
        border-radius: 0.4rem;
        padding: 0.5rem 1.5rem;
    }

    .descInfo {
        width: 70%;
        margin-left: 20%;
        margin-bottom: 1rem;
        /* display: flex; */
        flex-wrap: wrap;
    }

    .descInfo .item {
        /* padding-left: 1rem; */
        box-sizing: border-box;
        width: 100%;
        font-size: 1.6rem;
        color: #666;
        margin-bottom: 1rem;
    }

    /* .descInfo  .col{
        display: flex;
        flex-direction: column;
        /* justify-content: start; */
    /* align-items: center; */
    /* } */
    /* .descInfo .area{
        display: flex;

    } */

    .noOpenId {
        text-align: center;
        margin-top: 40%;
        font-size: 2rem;
    }

    .toolBtn {
        /* width: 5rem; */
        padding: 0.8rem !important;
    }

    .el-loading-spinner {
        font-size: 4rem;
    }

    .el-loading-text {
        font-size: 2.4rem !important;
    }

    .loading {
        text-align: center;
        margin-top: 30%;
        font-size: 20px;
    }
    .list{
        margin-bottom: 20px;
        padding: 5px;
    }
    .list .area{
        font-size: 14px;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .list .area .item{
        margin-right: 20px;
    }
    .el-table{
        font-size: 12px !important;
    }
    th.money_bill{
        color: red;
    }
    th.money{
        color: green;
    }
    .toList{
        margin: 5px 0 0 5px;
        border-radius: 5px;
        display: inline-block;
        background-color: #409EFF;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        padding: 5px;
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
        font-weight: bold;
    }
    .tableArea{
        /* border: */
        border:1px solid #EBEEF5;
        display: flex;
        color: #606266;

    }
    .tableArea .item{
        width: 33%;
        /* height: 150px; */
        border-right: 1px solid #EBEEF5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
    }
    .tableArea .item p{
        margin-bottom: 5px;
        text-align: left;
        width: 100%;
        /* font-size: 12px; */
    }
    .tableArea .item:last-child{
        border-right: none;
    }
    .tableArea .item .prefix{
        display: inline-block;
        width: 55px;
        text-align: right;
        margin-right: 5px;
    }
</style>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/element.css">

<body>
    <p class="loading">加载中...</p>
    <div id="app" style="visibility: hidden;">

        <div class="noOpenId" v-if="loaded && !openId">
            获取用户信息失败
        </div>
        <div class="openId" v-if="loaded && openId">
            <div class="toList" @click="toList">
                点击返回审批列表
            </div>
            <div class="header" v-if="false">
                {{hiddenTitle ? '  ' : ''}}
            </div>
            <div class="list">
                <p class="item" 
                style="color: #333;font-size: 1.8rem;font-weight: bold;text-align: center;margin-bottom: 10px;">
                 {{approveInfo.company}}
                </p>
                <div class="tableArea">
                    <div class="item">
                        <p><span class="prefix"> 运单ID:</span> {{tableData[0].yund_id}}</p>
                        <p><span class="prefix">货物名称:</span> {{tableData[0].goods}}</p>
                        <p><span class="prefix">车牌号: </span>{{tableData[0].cph}}</p>
                    </div>
                    <div class="item">
                        <p><span class="prefix">发货时间:</span> {{tableData[0].th_time}}</p>
                        <p><span class="prefix">卸货时间:</span> {{tableData[0].dd_time}}</p>
                        <p><span class="prefix">收货重量:</span> {{tableData[0].shkg}}</p>
                    </div>
                    <div class="item">
                        <p style="color: red;"><span class="prefix">实结金额:</span> {{tableData[0].money}}</p>
                        <p style="color: #20b759;" v-if="totalBillMoney != '0.00'" ><span class="prefix">含税金额:</span> {{tableData[0].money_bill}}</p>
                        <p ><span class="prefix">油气金额:</span> {{tableData[0].oil_money}}</p>
                    </div>
                </div>
                <el-table v-if="false" size="mini" :data="tableData" style="width: 100%" border>
                    <el-table-column prop="yund_id" label="运单ID" align="center">
                    </el-table-column>
                    <el-table-column prop="goods" label="货物名称" align="center">
                    </el-table-column>
                    <el-table-column prop="th_time" label="发货时间" align="center" width="100">
                    </el-table-column>
                    <el-table-column prop="dd_time" label="卸货时间" align="center"  width="100">
                    </el-table-column>
       
                    <el-table-column prop="money" label="实结金额" align="center" class-name="money">
                    </el-table-column>
                    <el-table-column v-if="totalBillMoney != '0.00'" prop="money_bill" label="含税金额" align="center" class-name="money_bill">
                    </el-table-column>
                    <el-table-column prop="oil_money" label="油气金额" align="center">
                    </el-table-column>
                    <el-table-column prop="cph" label="车牌号" align="center" >
                    </el-table-column>
                    <el-table-column prop="shkg" label="收货重量" align="center">
                    </el-table-column>
                </el-table>
                <div class="area">
                    <p class="item col">总车辆: <span
                        style="color: rgb(20, 105, 196);font-size: 2.5rem;font-weight: bold;">{{totalCar}}</span>
                    辆</p>
                    <p class="item col">总实结金额: <span
                            style="color: red;font-size: 2.5rem;font-weight: bold;">{{totalMoney}}</span> 元</p>

                    <p class="item col" v-if="totalBillMoney != '0.00'">总含税金额: <span
                        style="color: green;font-size: 2.5rem;font-weight: bold;">{{totalBillMoney}}</span>
                    元</p>
    
          
                </div>
            </div>

            <div class="descInfo" v-if="false">
                <p class="item" style="color: #333;font-size: 1.8rem;font-weight: bold;"> {{approveInfo.company}}</p>
                <p class="item">运单ID: {{approveInfo.add_id}}-{{approveInfo.yund_id}}</p>
                <!-- <p class="item">司机名称: {{approveInfo.driver_name}}</p> -->
                <p class="item">车牌号: {{approveInfo.cph}}</p>
                <p class="item">收货重量: {{approveInfo.shkg}}吨</p>
                <div class="area">
                    <p class="item col">含税金额: <span
                            style="color: green;font-size: 2.5rem;font-weight: bold;">{{approveInfo.money_bill}}</span>
                        元</p>

                    <p class="item col">实结金额: <span
                            style="color: red;font-size: 2.5rem;font-weight: bold;">{{approveInfo.money}}</span> 元</p>
                </div>

            </div>
            <div class="process">
                <div class="process-item" v-for="(item,index) in userStatusList">
                    <div :class="{leftLine:true,last:isLast(index),disable:item.approveStatus == 0}">
                        <div class="status">
                            <span v-if="item.approveStatus != 0"
                                :class="{icon:true,success:item.approveStatus == 1,wait:item.approveStatus == 2}"></span>
                        </div>
                    </div>

                    <div class="process-item-title">{{item.approveName}}</div>
                    <div class="process-item-status">
                        <span class="userName"> {{item.userName}}</span> {{statusMap(item.approveStatus)}}
                        <el-button v-if="item.approveStatus == 2 && showSignBtn" class="signBtn" type="primary"
                            @click="toSign">签名审批
                        </el-button>
                        <el-image v-if="index != 0 && item.approveStatus == 1 && item.svgImg" class="sign"
                            :src="item.svgImg" :preview-src-list="[item.svgImg]">
                        </el-image>
                    </div>
                    <div class="process-item-desc" v-if="item.signTime">{{item.signTime}}</div>
                </div>
            </div>
        </div>


        <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="dialogVisible" top="2vh" width="90%">
            <div class="signArea" v-if="dialogVisible">
                <div class="desc">
                    请在绿框范围内签名,建议横屏签字,展示效果最佳
                </div>
                <div id="signature"></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="toolBtn" @click="cancleSign">取 消</el-button>
                <!-- <el-button v-if="userInfo && userInfo.sign_img" class="toolBtn" type="success" @click="useLast">上次签名
                </el-button> -->
                <el-button class="toolBtn" type="danger" @click="resetSign">清空</el-button>
                <el-button class="toolBtn" type="primary" @click="sureSign">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        //简易响应式，以iphone6/7/8 plus 尺寸为准 414*736
        function REM() {
            var rate;
            //判断横竖屏 
            if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
                //竖屏
                rate = document.documentElement.clientWidth / 414;
            } else {
                //横屏
                rate = document.documentElement.clientHeight / 414;
            }
            document.documentElement.style.fontSize = rate * 10 + 'px';
        }
        REM();
        window.addEventListener("resize", REM);
    </script>
    <script src="./js/md5.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jSignature.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/api.js"></script>
    <script>
        let isTest = false;
        if(location.href.indexOf('127.0.0.1') != -1 || location.href.indexOf('localhost') != -1){
            isTest = true
        }else{
            isTest = false
        }

        const getCode = async () => {
            var local = window.location.href; //当前路径，注意：路径必须是在公众号配置过的
            var APPID = 'wxe3ce6dedaeb502a7'; //此为公众号的openId
            var APPSecret = '7e93926d82455b561a446d7e2d05db24'; //此为公众号的secret
            var code = getUrlParam('code') //工具函数，获取code参数信息
            if (code == "" || code == undefined || code == null) {
                //不存在code
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID +
                    '&secret=' + APPSecret +
                    '&redirect_uri=' + encodeURIComponent(local) +
                    '&response_type=code&scope=snsapi_base&state=#wechat_redirect';
            } else {
                // window.location.reload();
                //通过code获取openid
                let result = await $api.getWeChatOpenid({
                    code
                });
                return result
            }
        }
        // $('#app').hide();
        $("#app").css("visibility", "visible"); //显示核心元素

        new Vue({
            el: "#app",
            data: {
                hiddenTitle: false,
                loaded: false,
                showSignBtn: true,
                dialogVisible: false,
                openId: '1',
                userInfo: null, //当前审批人信息
                approveInfo: {}, //当前运单审批信息
                userStatusList: [
                    //     {
                    //     approveName:'',
                    //     approveStatus: '',
                    //     userName:'',
                    //     signTime:'',
                    //     signImg:'',
                    // }
                ],
                tableData: [
            ],
            totalBillMoney:0,
            totalMoney:0,
            totalCar:0,

            },
            created() {

            },
            mounted() {
                // $('#app').show();
                this.initial();
                $(".loading").hide();
            },
            methods: {
                testBtn() {
                    this.initial();
                },
                resetData() {
                    this.loaded = false;
                    this.showSignBtn = true;
                    this.dialogVisible = false;
                    this.openId = '1';
                    this.userInfo = null;
                    this.approveInfo = {};
                    this.userStatusList = [];
                },
                async handleFun() {
                    let batch_number = getUrlParam('batch_number');
                    if (!batch_number) {
                        this.openId = '';
                        return;
                    }
                    //获取当前审批流程详情
                    let billDetail = await $api.getBatchApproveBillDetail({
                        batch_number
                    });
                    if (billDetail.code == 200) {
                        console.log('审批流程详情', billDetail);
                        this.approveInfo = billDetail.data;
                        this.tableData = billDetail.user;
                        this.totalBillMoney = billDetail.totalBillMoney;
                        this.totalMoney = billDetail.totalMoney;
                        this.totalCar = billDetail.count;
                        //获取所有用户列表
                        let userListInfo = await $api.getApproveRoleList();
                        console.log('所有用户数据', userListInfo);

                        if (userListInfo.code == 200) {
                            let userList = userListInfo.data;
                            //获取当前的流程节点状态 然后从对应的用户列表中匹配查询
                            let status = this.approveInfo.status;
                            status = status + 1; //流程节点状态+1则为当前节点
                            let currentUserInfo = {};
                            let lastLen = Object.keys(userList).length;
                            if (status > lastLen) {
                                //全部审批流程已经全部结束 取最后节点
                                currentUserInfo = userList[lastLen].role_list;
                            } else {
                                //处于审批流程某一节点
                                currentUserInfo = userList[status].role_list;
                            }

                            //根据获取的openid来查找当前审批的用户信息
                            this.userInfo = currentUserInfo.find(item => {
                                return item.openId == this.openId;
                            });
                            console.log('当前审批用户数据', this.userInfo);
                            if (!this.userInfo) {
                                //没有匹配到对应的用户 不显示审批按钮
                                this.showSignBtn = false;
                            }

                            //生成渲染路程节点列表
                            this.userStatusList = Object.keys(userList).map(item => {
                                let _status = item;
                                let role_list = userList[item].role_list;
                                let role_name = userList[item].role_name;
                                let keyName = 'status' + _status + '_name';
                                let keyTime = 'status' + _status + '_time';
                                let userName = this.approveInfo[keyName];
                                let signTime = this.approveInfo[keyTime];
                                let signImg = '',
                                    svgImg = '';
                                if (Number(_status) < status && userName) {
                                    //已经审批 存在签名
                                    let item = role_list.find(item => {
                                        return item.user_name == userName;
                                    });
                                    if (item) {
                                        signImg = item.sign_img;
                                        svgImg = decodeURIComponent(item.svg_img);
                                    }
                                }
                                //取所有用户列表中
                                return {
                                    approveName: role_name,
                                    approveStatus: _status == status ? 2 : ((_status < status) ?
                                        1 : 0),
                                    userName,
                                    signTime,
                                    signImg,
                                    svgImg,
                                }
                            })
                            console.log('this.userStatusList', this.userStatusList);
                        }
                    }

                    this.loaded = true; //加载完毕
                },
                async initial() {
                    this.resetData();
                    let native = getUrlParam('native');
                    if (native == '1') {
                        //app端显示
                        this.hiddenTitle = true;
                        this.openId = '11'; //随便赋值
                        this.handleFun();

                    } else {
                        let result = {
                            code:''
                        }
                        if (!isTest) {
                            result = await getCode();
                        } else {
                            result = {
                                code: 200,
                                data: {
                                    openid: 'ogvOkwzxWe3Be4CSdMOTxYQoCrak'
                                }
                            }
                        }
                        if (result.code == 200) {
                            //获取到openid
                            this.openId = result.data.openid;
                            this.handleFun();
                        } else {
                            this.openId = '';
                        }
                    }


                },
                toList(){
                    location.href = 'signList.html?openId=' + this.openId;
                },
                reloadPage() {
                    this.resetData();
                    this.handleFun();
                },
                isLast(index) {
                    return index == this.userStatusList.length - 1
                },
                statusMap(status) {
                    if (status == 0) {
                        return '待审批'
                    }
                    if (status == 1) {
                        return '已审批'
                    }
                    if (status == 2) {
                        return '审批中'
                    }
                },
                toSign() {
                    this.dialogVisible = true;
                    setTimeout(() => {
                        var param = {
                            width: '100%', //签名区域的宽
                            height: '100%', //签名区域的高
                            cssclass: 'jrw-signature', //画布的类 可以写自定义的样式
                            UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
                            signatureLine: false, //去除默认画布上那条横线
                            lineWidth: '3' //画笔的大小
                        };
                        //初始化签名面板
                        $("#signature").jSignature(param);
                        //判断是否有之前的签名 有的话直接回显
                        let signImg = this.userInfo.sign_img;
                        console.log('this.userInfo',this.userInfo);
                        
                        $("#signature").jSignature("setData", signImg);
                    }, 0)

                },
                //使用上一次签名
                useLast() {
                    this.$confirm('确认要使用上一次的签名进行审批吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let signImg = this.userInfo.sign_img;
                        $("#signature").jSignature("setData", signImg);
                    }).catch(() => {

                    });
                },
                cancleSign() {
                    //销毁签名面板
                    $("#signature").jSignature('destroy');
                    this.dialogVisible = false;
                },
                resetSign() {
                    this.$confirm('确认要清空签名面板吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //清空签名面板
                        $("#signature").jSignature("reset");
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });

                },
                sureSign() {
                    this.$confirm('确认要使用此签名进行审批吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        if ($("#signature").jSignature('getData', 'native').length === 0) {
                            this.$message.error("请签名后再提交！");
                            return;
                        }
                        //此base30数据用户签名区域的数据回显
                        var datapair = $("#signature").jSignature("getData", "base30");
                        //此svg数据用于流程图签名回显
                        var datapairSvg = $("#signature").jSignature("getData", "svg");
                        //签名的base30代码 用于作为参数发给后端
                        var signBaseStr = "data:" + datapair.join(",");
                        //签名的svg代码 用于作为参数发给后端
                        var signSvgStr = "data:" + datapairSvg.join(",");
                        
                        const loading = this.$loading({
                            lock: true,
                            text: '上传中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        console.log('$("#signature")',$api);

                        // return;
                        //走签名接口
                        let result = await $api.saveBatchApproveSign({
                            batch_number: getUrlParam('batch_number'),
                            img: signBaseStr,
                            svg_img: encodeURIComponent(signSvgStr),
                            status: this.approveInfo.status + 1,
                            person_name: this.userInfo.user_name,
                            user_id: this.userInfo.user_id
                        });
                        // return;
                        if (result.code == 200) {
                            loading.close();
                            this.$message.success("签名审批成功！");
                            setTimeout(() => {
                                this.dialogVisible = false;
                                // this.reloadPage();
                                this.toList()
                            }, 1000)
                        }
                    }).catch(() => {

                    });
                }
            }
        })
    </script>
</body>

</html>